import { useState, useCallback, useMemo, useEffect, useLayoutEffect } from "react"

// useCallback 是用于缓存一个函数声明的
// useCallback用的不多，可以使用useMemo去代替useCallback

const A = props => {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)

  // 下面的代码是声明一个函数
  // 当状态发生了变化，整个A函数需要重新渲染
  // 在重新渲染过程中，fn函数就会重新声明
  // 使用useCallback，可以把函数声明缓存起来
  // [] 表示缓存一次
  // [num] 表示当num发生了变化，重新声明
  const fn = useCallback(() => {
    console.log("我是一个函数声明~");
  }, [])

  return (
    <div>
      <h2>函数式组件</h2>
      <button onClick={() => fn()}>点击</button>
    </div>
  )
}

export default A;
